<template>
  <view class="page-container" v-if="goodsInfo.id">
    <GlobalTopBar ref="topBarRef" class="topbars" :isLeft="true">
      <template #title><text>产品详情</text></template>
    </GlobalTopBar>
    <GlobalTopBar ref="topBarRef"> </GlobalTopBar>
    <view class="page_content">
      <scroll-view
        scroll-y="true"
        class="scroll-Y"
        :scroll-into-view="scrollviewID"
        scroll-with-animation
        @scroll="scrollFun"
      >
        <view>
          <!-- 轮播组件 -->
          <view class="seiperbox" :class="{ ac: goodsbyList.length < 2 }">
            <view class="btox flex" v-if="goodsbyList.length < 2">
              <view class="bt_left flex">
                <view>
                  <text class="t1">￥</text>
                  <text class="t2">{{ goodsInfo.buy_price }}</text>
                  <text class="t1">起</text>
                </view>
                <view
                  class="couponText"
                  v-if="goodsInfo?.goods_relation_coupon_list?.length"
                  >{{
                    goodsInfo?.goods_relation_coupon_list[0].coupon_type === 3
                      ? '免上门费券'
                      : goodsInfo?.goods_relation_coupon_list[0]?.coupon_title
                  }}</view
                >
              </view>
              <view class="bt_right">
                已成交 {{ goodsInfo.saled_count_text }}
              </view>
            </view>
            <view class="count_box" :class="{ ac: goodsbyList.length > 1 }"
              >{{ swipercount }}/{{ bannerList.length }}</view
            >
            <swiper
              class="swiper"
              autoplay
              circular
              interval="3000"
              duration="500"
              :style="{ height: swiperHeight + 'px' }"
              @change="swiperChange"
            >
              <!-- 轮播项1 -->
              <swiper-item
                class="swiitem"
                v-for="(item, index) in bannerList"
                :key="index + 1"
              >
                <view class="slide">
                  <image
                    :src="item"
                    mode="widthFix"
                    :class="`slide-img  slide_img${index + 1}`"
                  />
                </view>
              </swiper-item>
            </swiper>
          </view>
          <!-- 项目 -->
          <view class="projectul" v-if="goodsbyList.length > 1 && types == 2">
            <view
              class="pli flex"
              :class="{ ac: indexs === index }"
              v-for="(item, index) in goodsbyList"
              :key="index + 1"
              @click="indexs = index"
            >
              <view class="title">{{ item.goods_title }}</view>
            </view>
          </view>
          <!-- 名称 -->
          <view class="textbox">
            <view class="tname flex" :class="{ ac: goodsbyList.length > 1 }"
              >{{
                goodsbyList.length < 2
                  ? goodsInfo.goods_title
                  : `￥${goodsInfo.buy_price}`
              }}
              <text v-if="goodsbyList.length > 1"
                >已成交 {{ goodsInfo.saled_count_text }}</text
              ></view
            >
            <view class="tname2" v-if="goodsInfo.desc != '无'">{{
              goodsInfo.desc
            }}</view>
          </view>

          <!-- 优惠券 -->
          <view
            class="coupon"
            v-if="goodsInfo?.goods_relation_coupon_list?.length"
            @click="drawerRef.open()"
          >
            <view class="left">{{
              goodsInfo?.goods_relation_coupon_list[0].coupon_type === 3
                ? '免上门费券'
                : goodsInfo?.goods_relation_coupon_list[0]?.coupon_title
            }}</view>
            <view class="right"
              >领券<uni-icons type="right" size="14" color="#fff"></uni-icons
            ></view>
          </view>
          <!-- 保障 -->
          <view
            class="bzsbox"
            @click="drawerRef2.open()"
            v-if="service_guarantee_arr?.length"
          >
            <view class="bzbox">
              <view class="flex_center">
                <text class="t1">保障</text>
                <template
                  v-for="(item, index) in service_guarantee_arr"
                  :key="index + 1"
                >
                  <image
                    class="bzimg"
                    :src="`${store.imgDomain}fwbz_2.png`"
                    mode="scaleToFill"
                  />
                  <text class="t2">{{ item.name }}</text>
                </template>
              </view>
              <uni-icons type="right" size="16"></uni-icons>
            </view>
          </view>
          <!-- 中间线 -->
          <view id="lineid" class="lines"></view>
          <!-- 服务详情 -->
          <view
            id="tabsboxr"
            class="tabsbox flex"
            v-if="goodsInfo.service_order_evaluation_list?.length"
          >
            <view
              class="l"
              :class="{ ac: tabstorf }"
              @click="(scrollviewID = 'lineid'), (tabstorf = true)"
              >服务详情</view
            >

            <view
              class="r"
              :class="{ ac: !tabstorf }"
              @click="(scrollviewID = 'ckqb'), (tabstorf = false)"
              >用户评价</view
            >
          </view>
          <view class="xq" id="fwxq"> 服务详情 </view>
          <view class="fuxqbox" ref="fuxqbox" v-html="goodsInfo.content">
          </view>
          <template v-if="goodsInfo.service_order_evaluation_list?.length">
            <!-- 用戶评价 -->
            <view
              class="xq flex"
              id="ckqb"
              @click="store.to(`/pages/server/evaluate?id=${goodsInfo.id}`)"
            >
              用户评价
              <view class="flex"
                >查看全部<uni-icons type="right" size="18"></uni-icons
              ></view>
            </view>
            <view class="pjbox">
              <view
                class="li"
                v-for="(item, index) in goodsInfo.service_order_evaluation_list"
                :key="index + 1"
              >
                <view class="flex" style="margin-bottom: 10rpx">
                  <image
                    class="head_img"
                    :src="item.headimg"
                    mode="scaleToFill"
                  />
                  <text>{{ item.nick_name }}</text>
                  <image
                    class="xx_img"
                    v-for="(i, y) in 5"
                    :key="y + 1"
                    :src="
                      y < item.score
                        ? `${store.imgDomain}evaluate_1.png`
                        : `${store.imgDomain}evaluate_2.png`
                    "
                    mode="widthFix"
                  />
                </view>
                <view v-html="item.content"> </view>
                <view class="flex" style="margin-top: 20rpx" v-if="item.img">
                  <image
                    v-for="(i, y) in item.img.split(',')"
                    @click="ylImgFun(y, item.img.split(','))"
                    class="wk_img"
                    :src="i"
                    mode="aspectFill"
                  />
                </view>
              </view>
            </view>
          </template>
        </view>
      </scroll-view>

      <!-- 优惠券具体数据 -->
      <y-drawer
        ref="drawerRef"
        :borderRadius="20"
        :showMask="true"
        :maskClosable="true"
        :length="700"
        title="优惠"
      >
        <scroll-view class="body yhbox" scroll-y="true">
          <view
            class="libox"
            :class="{ ac: item.is_receive === 1 }"
            v-for="(item, index) in goodsInfo?.goods_relation_coupon_list"
            :key="index + 1"
          >
            <view class="left">
              <view class="t1">{{ item.coupon_title }}</view>
              <view class="t2">{{
                `${formatTimestamp(item.start_time)}~${formatTimestamp(
                  item.end_time,
                )}`
              }}</view>
              <view class="t3">
                {{ item.coupon_desc }}
              </view>
            </view>
            <view class="right">
              <view class="mang" v-if="item.coupon_type === 1">
                <text>{{ item.reduce_price }}</text
                >元
              </view>
              <view class="mang" v-else-if="item.coupon_type === 2">
                <text>{{ item.discount }}</text
                >折
              </view>
              <view class="mang" v-else>免上门券</view>
              <view class="tj" v-if="[1, 2].includes(item.coupon_type)">
                {{ item.coupon_title }}</view
              >
              <view
                class="lqbtn"
                v-if="item.is_receive === 2"
                @click="receiveCouponByGoodsDetals(item)"
                >点击领取</view
              >
              <view class="lqbtn ac" v-else>已领取</view>
            </view>
          </view>
        </scroll-view>
      </y-drawer>
      <!-- 保障 -->
      <y-drawer
        ref="drawerRef2"
        :borderRadius="20"
        :showMask="true"
        :maskClosable="true"
        :length="600"
      >
        <view class="title">
          <image
            class="fwbz_img"
            :src="`${store.imgDomain}fwbz_1.png`"
            mode="widthFix"
          />
        </view>
        <view class="fwbz">
          <view
            class="tsbox"
            v-for="(item, index) in service_guarantee_arr"
            :key="index + 1"
          >
            <view class="t1"
              >{{ item.name }}
              <image
                class="sf_img"
                :src="`${store.imgDomain}fwbz_2.png`"
                mode="widthFix"
            /></view>
            <view class="t2">{{ item.desc }}</view>
          </view>
        </view>
      </y-drawer>

      <view class="fbottom">
        <button id="contactBtn" open-type="contact" bindcontact="onContact">
          <view class="iconbox">
            <uni-icons type="chat" size="30"></uni-icons>
            <text> 在线咨询 </text>
          </view>
        </button>

        <view class="iconbox" @click="handleCall">
          <uni-icons type="phone" size="30"></uni-icons>
          <text> 电话咨询 </text>
        </view>
        <view
          class="btns"
          @click="store.to(`/pages/server/placeAnOrder?id=${goodsInfo.id}`)"
          >立即预约</view
        >
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  ref,
  nextTick,
  computed,
  reactive,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import Drawer from '@/components/Drawer.vue';
import { formatTimestamp } from '@/utils/validate';
import SearchInput from '@/components/SearchInput.vue';

const store = useCounterStore();
const goodsInfo = ref({});
const indexs = ref(0);
const datas = ref({});
const drawerRef = ref(null);
const drawerRef2 = ref(null);
const fuxqbox = ref(null);
const types = ref(2);
const goodsbyList = ref([]);
const bannerList = ref([]);
const service_guarantee_arr = ref([]);
const swiperHeight = ref(300);
const scrollviewID = ref('');
const fwxq = ref(null);
watch(
  () => indexs.value,
  () => {
    getGoodsInfoById();
  },
);

const ylImgFun = (index, list) => {
  uni.previewImage({
    current: index,
    urls: list,
  });
};

// 获取服务详情数据
const getGoodsInfoById = async (option) => {
  swipercount.value = 1;
  bannerList.value = [];
  if (!goodsbyList.value?.length && option.type === 2) return;
  service_guarantee_arr.value = [];
  const data = await request('wxapp/index/getGoodsInfoById', {
    id: goodsbyList.value[indexs.value]?.id || option.id,
  });
  data.content = data.content.replace(
    /style=""/g,
    'style="width:100%;height:auto;"',
  );
  if (data.is_warranty === 1) {
    service_guarantee_arr.value.push({
      name: `保修${data.warranty_days}天`,
      desc: `服务保障${data.warranty_days}天`,
    });
  }
  const arr = data.service_guarantee_json
    ? JSON.parse(data.service_guarantee_json)
    : [];
  if (arr.length) {
    let num = 3;
    if (service_guarantee_arr.value.length) {
      num = 2;
    }
    service_guarantee_arr.value = [
      ...service_guarantee_arr.value,
      ...arr.slice(0, num),
    ];
  }
  goodsInfo.value = { ...data };
  bannerList.value = goodsInfo.value.banner.split(',');
  await nextTick();
  setTimeout(() => {
    uni
      .createSelectorQuery()
      .select('#lineid')
      .boundingClientRect((data) => {
        if (!data) return;
        top1 = data.top;
        console.log(top1, data);
      })
      .exec();
    uni
      .createSelectorQuery()
      .select('#ckqb')
      .boundingClientRect((data) => {
        if (!data) return;
        top2 = data.top;
        console.log(top2, data);
      })
      .exec();
  }, 200);
};

// 根据分类Id获取服务器详情数据（默认三级分类Id）
const getGoodsInfoAndRelationGoodsByGoodsCategoryId = async (option) => {
  goodsbyList.value = await request(
    'wxapp/index/getGoodsInfoAndRelationGoodsByGoodsCategoryId',
    { goods_category_id: option.id },
  );

  getGoodsInfoById(option);
};
// 服务详情页领取优惠券
const receiveCouponByGoodsDetals = async (item) => {
  await request(
    'wxapp/index/receiveCouponByGoodsDetals',
    { coupon_id: item.id, coupon_num: 1 },
    'post',
  );
  item.is_receive = 1;
};
const swipercount = ref(1);
const swiperChange = (e) => {
  swipercount.value = e.detail.current + 1;
};

// 投诉电话
const handleCall = () => {
  uni.makePhoneCall({
    phoneNumber: store.customerServicePhone, // 要拨打的电话号码（字符串类型）
    success: () => {
      console.log('拨打电话请求已发出');
    },
  });
};
const tabstorf = ref(true);
let top1 = 0;
let top2 = 0;
const scrollFun = (e) => {
  scrollviewID.value = '';
  if (
    (e.detail.scrollTop > top1 && e.detail.scrollTop < top2 - 800) ||
    e.detail.scrollTop < top1
  ) {
    tabstorf.value = true;
  } else {
    tabstorf.value = false;
  }
};
onLoad((option) => {
  types.value = option.type;
  if (option.type == 2) {
    getGoodsInfoAndRelationGoodsByGoodsCategoryId(option);
  } else {
    getGoodsInfoById(option);
  }
});
</script>

<style scoped lang="scss">
.topbars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 11;
  background-color: #fff;
}
.page-container {
  background-color: #fff;
}
.page_content {
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
.content {
  display: flex;
  flex-direction: column;
  background-color: aliceblue;
  height: 100vh;
}
// .swiper {
//   height: max-content;
// }
// .swiitem {
//   height: max-content;
// }
.projectul {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20rpx;
  place-content: center;
  padding: 20rpx;
  .pli {
    position: relative;
    flex-shrink: 0;
    border-radius: 20rpx;
    border: 1rpx solid #cbcbcb;
    padding: 14rpx;
    width: max-content;
    max-width: 222rpx;
    height: 50rpx;
    border-color: #008ff4;
    filter: grayscale(1);
    &.ac {
      filter: grayscale(0);
    }
    .tops {
      position: absolute;
      top: -8rpx;
      left: -4rpx;
      padding: 0 12rpx;
      line-height: 32rpx;
      background-color: #0081f1;
      border-radius: 10rpx;
      font-size: 20rpx;
      color: #fff;
      text {
        position: relative;
        z-index: 1;
      }
    }
    .title {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 30rpx;
    }
    .title2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text {
        font-size: 24rpx;
      }
      .t1 {
        color: #ff0000;
      }
      .t2 {
        color: $uni-text-color-grey;
      }
    }
  }
}
.coupon {
  margin: 20rpx 0;
  display: flex;
  padding: 0 20rpx;
  box-sizing: border-box;
  justify-content: space-between;
  .left {
    font-size: 24rpx;
    padding: 10rpx;
    background-color: #ffe7e7;
    color: #fe0f10;
  }
  .right {
    font-size: 24rpx;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 5rpx 10rpx;
    background-color: #fe0f10;
    border-radius: 10rpx;
  }
}
.bzsbox {
  margin: 20rpx 0;
  box-sizing: border-box;
  padding: 0 20rpx;
}
.bzbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: #f2f8ff;
  border-radius: 10rpx;
  font-size: 24rpx;
  padding: 20rpx;
  .flex_center {
    width: max-content;
  }
  .t1 {
    font-weight: 700;

    margin-right: 20rpx;
  }

  .bzimg {
    width: 26rpx;
    height: 30rpx;
    margin: 0 20rpx;
  }
}
.lines {
  width: 100%;
  height: 14rpx;
  background-color: #f0f0f0;
}
.xq {
  box-sizing: border-box;
  padding: 0 25rpx;
  line-height: 106rpx;
  font-size: 30rpx;
  font-weight: 700;
}
.fbottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  font-size: 20rpx;
  justify-content: space-around;
  background-color: #fff;

  .iconbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text {
    }
  }
  .btns {
    border-radius: 31rpx;
    font-size: 30rpx;
    color: #fff;
    line-height: 62rpx;
    background-color: #007ff1;
    padding: 0 120rpx;
  }
}
.fuxqbox {
  padding-bottom: 20rpx;
  image {
    width: 100%;
  }
  img {
    width: 100%;
  }
}
.yhbox {
  box-sizing: border-box;
  padding: 20rpx;
  height: 90%; /* 确保高度固定 */
  .libox {
    border-radius: 20rpx;
    border: 1rpx solid #999;
    display: flex;
    overflow: hidden;
    margin-bottom: 20rpx;
    &.ac {
      filter: grayscale(1);
    }
    .left {
      box-sizing: border-box;
      padding: 20rpx;
      flex: 1;
      .t1 {
        font-size: 30rpx;
        font-weight: 700;
        margin-bottom: 10rpx;
      }
      .t2 {
        font-size: 24rpx;
        color: $uni-text-color-grey;
        padding-bottom: 20rpx;
        border-bottom: 1rpx dashed #999;
      }
      .t3 {
        margin-top: 20rpx;
        font-size: 24rpx;
        color: $uni-text-color-grey;
      }
    }
    .right {
      width: 30%;
      background-color: #fbf0de;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .mang {
        color: #dfb266;
        font-size: 24rpx;
        margin-bottom: 10rpx;
        text {
          font-size: 50rpx;
          font-weight: 700;
        }
      }
      .tj {
        margin: 20rpx 0;
        color: #b78746;
        font-size: 20rpx;
      }
      .lqbtn {
        line-height: 50rpx;
        padding: 0 25rpx;
        border-radius: 25rpx;
        background-color: #f2d19c;
        color: #462d19;
        &.ac {
          filter: grayscale(1);
        }
      }
    }
  }
}
.fwbz {
  box-sizing: border-box;
  padding: 20rpx;

  .title {
    font-size: 34rpx;
    font-weight: 600;
    margin-bottom: 30rpx;
  }
  .tsbox {
    box-sizing: border-box;
    padding-left: 55rpx;
    margin-bottom: 30rpx;
  }
  .t1 {
    position: relative;
    font-size: 30rpx;
    font-weight: 600;
    margin-bottom: 10rpx;
    .sf_img {
      position: absolute;
      width: 26rpx;
      top: 50%;
      left: -40rpx;
      transform: translateY(-50%);
    }
  }
  .t2 {
    font-size: 24rpx;
    color: #666;
  }
}
.title {
  .fwbz_img {
    width: 100%;
  }
}
.seiperbox {
  position: relative;
  &.ac {
    padding-bottom: 60rpx;
  }
  .btox {
    z-index: 10;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 20rpx 20rpx 0 0;
    background: #ff5722;
    padding: 20rpx;
    box-sizing: border-box;
    justify-content: space-between;
    .t1 {
      font-size: 18rpx;
    }
    .t2 {
      font-size: 40rpx;
    }
    .couponText {
      margin-left: 10rpx;
      background-color: #fff;
      color: #e96261;
      line-height: 30rpx;
      border-radius: 15rpx;
      padding: 0 15rpx;
    }
  }
}
.textbox {
  margin-top: 20rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
}
.tname {
  justify-content: space-between;
  font-size: 36rpx;
  color: #000;
  font-weight: 700;
  margin: 10rpx 0;
  &.ac {
    color: #fe0f10;
  }
  text {
    font-weight: lighter;
    font-size: 24rpx;
    color: $uni-text-color-grey;
  }
}
.tname2 {
  color: $uni-text-color-grey;
  margin: 10rpx 0;
}
.count_box {
  position: absolute;
  bottom: 100rpx;
  right: 20rpx;
  z-index: 4;
  background-color: rgba(255, 255, 255, 0.7);
  line-height: 50rpx;
  border-radius: 25rpx;
  padding: 0 30rpx;
  &.ac {
    bottom: 20rpx;
  }
}
#contactBtn {
  margin: 0;
}
.slide-img {
  width: 100%;
}
.pjbox {
  box-sizing: border-box;
  padding: 0 20rpx;
  .head_img {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    margin-right: 30rpx;
  }
  text {
    margin-right: 20rpx;
  }
  .xx_img {
    width: 25rpx;
    margin: 0 5rpx;
  }
  .li {
    margin-bottom: 20rpx;
  }
}
#ckqb {
  justify-content: space-between;
  view {
    color: $uni-text-color-grey;
    font-size: 24rpx;
    font-weight: 500;
  }
}
.wk_img {
  width: 100rpx;
  height: 100rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}
.tabsbox {
  padding: 20rpx 0;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  justify-content: space-around;
  background-color: #fff;
  view {
    position: relative;
    font-size: 30rpx;
    padding-bottom: 20rpx;
    &.ac {
      color: #007ff1;
      &::after {
        content: ' ';
        position: absolute;
        bottom: 0rpx;
        left: 50%;
        transform: translate(-50%);
        width: 50rpx;
        height: 2rpx;
        background-color: #007ff1;
      }
    }
  }
  // font
}
.scroll-Y {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 120rpx;
}
</style>
